<template>
  <div class="container">
    <slot name="add-btn"></slot>
    <el-table
      :data="tableData"
      style="width: 100%;"
      border
      header-row-class-name="header-style"
      header-cell-class-name="head-cell"
      v-loading="loading"
    >
      <el-table-column v-if="multiSelection" type="selection" width="55"></el-table-column>
      <el-table-column
        v-for="item in columnProps"
        :key="item.dataIndex"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        align="center"
      >
        <!-- <template v-if="item.isScope" slot-scope="scope">
            <slot name='column-scope' ></slot>
        </template>-->
      </el-table-column>
      <el-table-column v-if="showHandle" label="操作" align="center">
        <template slot-scope="scope">
          <el-link
            @click="_getDetail(scope.$index,scope.row)"
            icon="el-icon-edit"
            type="primary"
            :underline="false"
          >修改</el-link>
          <el-popover
            placement="top"
            width="210"
            v-model="popVisibleArr[scope.$index]"
            trigger="click"
          >
            <div>
              <i class="el-icon-error" style="color:red"></i>
              <span>你确定要删除该条记录么？</span>
            </div>
            <div style="text-align: right; margin-top: 20px">
              <el-button size="mini" @click="setPopVisible(scope.$index)">取消</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </div>
            <el-link
              icon="el-icon-delete"
              type="danger"
              :underline="false"
              style="margin-left:20px;"
              slot="reference"
            >删除</el-link>
          </el-popover>
        </template>
      </el-table-column>
      <div slot="empty">
        <i class="el-icon-receiving no-data"></i>
        <div class="empty-text">暂无数据</div>
      </div>
    </el-table>
    <el-pagination
      style="margin-top:20px;text-align:center;"
      background
      layout="prev, pager, next"
      :page-size="pagination.pageSize"
      :total="pagination.totalElements"
      @current-change="currentPage"
      :current-page="pagination.pageIndex"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    /**
     * columnProps属性
     * @prop {String} dataIndex
     * @prop {String} key
     * @prop {String} title
     * @prop {String} width
     */
    columnProps: {
      type: Array
    },
    tableData: {
      type: Array
    },
    showHandle: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object
    },
    multiSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      visible: true,
      popVisibleArr: []
    };
  },
  methods: {
    _getDetail(rowIndex, row) {
      this.$emit("modify", row);
    },
    _delArticle(rowIndex, row) {
      this.$emit("delete", row);
    },
    currentPage(currentIndex) {
      const _this = this;
      this.loading = true;
      this.$emit("currentPage", currentIndex);
      _this.loading = false;
      // setTimeout(()=>{
      //   _this.loading=false
      // },1000)
    },
    /**
     *设置删除框的显隐
     */
    setPopVisible(rowIndex) {
      let _this = this;
      _this.popVisibleArr.forEach((item, index) => {
        index == rowIndex
          ? _this.$set(
              _this.popVisibleArr,
              rowIndex,
              !_this.popVisibleArr[rowIndex]
            )
          : _this.$set(_this.popVisibleArr, index, false);
      });
    },
    /**
     *点击删除按钮
     */
    handleDelete(rowIndex, row) {
      this.$emit("delete", row);
      this.setPopVisible(rowIndex);
    }
  },

  watch: {
    tableData(newArr, oldArr) {
      newArr.forEach(item => [this.popVisibleArr.push(false)]);
    }
  }
};
</script>
<style lang='scss'>
.el-card {
  border-top: 1px solid #f4f4f4;
  .no-data {
    font-size: 45px;
    margin-top: 20px;
    color: #ccc;
  }
  .empty-text {
    font-size: 12px;
    color: #888;
    margin-top: -30px;
  }
  .header-style {
    font-size: 10px;
  }
  .head-cell {
    width: 10px;
  }
}
</style>